<script lang="ts" setup></script>

<template>
  <div class="pages">
    <div class="menu">
      <div class="content">
        <ul>
          <li>开发者文档</li>
          <li class="active">API文档</li>
          <li>常用工具</li>
        </ul>
      </div>
    </div>
    <div class="help">
      <div class="help-left">
        <div class="search">
          <img src="/images/layouts/search.png" alt="" />
          <input type="text" placeholder="搜索" />
        </div>
        <div class="help-menu">
          <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>商户进件</span>
              </template>
              <el-menu-item index="1-4-1">二级菜单</el-menu-item>
              <el-sub-menu index="1-4">
                <template #title>二级菜单</template>
                <el-menu-item index="1-4-1">二级菜单</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
        </div>
      </div>
      <div class="help-right">
        <div class="help-content">
          <h1>内容</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pages {
  .menu {
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ecedf0;
    ul {
      &::after {
        content: "";
        display: block;
        clear: both;
      }
    }
    li {
      font-weight: 400;
      font-size: 18px;
      color: #070a14;
      float: left;
      margin-right: 52px;
      position: relative;
      height: 100%;
      box-sizing: border-box;
      padding: 20px 0;
      cursor: pointer;
      &.active {
        color: #e12010;
        &::after {
          content: "";
          display: block;
          width: 54px;
          height: 6px;
          background: #e12010;
          position: absolute;
          left: 50%;
          bottom: 0;
          margin-left: -27px;
        }
      }
    }
  }
  .help {
    max-width: 1920px;
    margin: 0 auto;
    &::after {
      content: "";
      display: block;
      clear: both;
    }
    .help-left,
    .help-right {
      height: 100%;
    }
    .help-left {
      width: 330px;
      padding-top: 30px;
      box-sizing: border-box;
      float: left;
      .search {
        height: 36px;
        background: rgba(255, 255, 255, 0.01);
        border-radius: 4px;
        border: 1px solid #ecedf0;
        display: flex;
        align-items: center;
        padding-left: 20px;
        box-sizing: border-box;
        margin-right: 18px;
        margin-left: 10px;
        img {
          width: 19px;
          height: 19px;
        }
        input {
          flex: 1;
          height: 100%;
          padding-left: 14px;
          border: none;
          outline: none;
          background: none;
          border-radius: 7px;
          font-weight: 400;
          font-size: 14px;
          &::-webkit-input-placeholder {
            font-weight: 400;
            font-size: 14px;
            color: #8b8b8b;
          }
        }
      }
    }
    .help-right {
      border-left: 1px solid #ecedf0;
      float: left;
      width: calc(100% - 330px);
      padding-top: 48px;
      box-sizing: border-box;
      padding-bottom: 50px;
      min-height: 600px;
      h1 {
        font-weight: 550;
        font-size: 28px;
        color: #000000;
        margin-left: 30px;
        margin-bottom: 40px;
      }
    }
  }
}
</style>
